<template>
	<div>
		<el-tag type="info">
			{{ fileName }}
			<span class="title-dot" v-if="isChange"></span>
		</el-tag>

		<!-- <ace-editor
			v-model:value="appConfig"
			lang="json"
			theme="monokai"
			style="height: 620px"
			@change="editorChange"
			ref="editor"
		/> -->
		<editor v-model="appConfig" @init="editorInit" lang="json" theme="monokai" height="600"></editor>
	</div>
</template>

<script>
export default {
	data() {
		return {
			isChange: false,
			fileName: 'appConfig.json',
			appConfig: '',
			options: {},
			editor: null
		}
	},
	components: {
		editor: require('vue2-ace-editor')
	},
	methods: {
		editorInit: function() {
			require('brace/ext/language_tools') // language extension prerequsite...
			require('brace/mode/json')
			require('brace/theme/monokai')
		},
		getAppConfig() {
			this.$db.get('config').then(res => {
				this.appConfig = JSON.stringify(res, null, 2)
			})
		},
		editorChange() {
			this.isChange = true
		},
		handleSave() {
			this.$db.set('appConfig', this.appConfig)
			this.isChange = false
		}
	},
	mounted() {
		// 获得 db 中的 appconfig
		this.getAppConfig()
		// this.editor = (this.$refs.editor as any)._editor
		// if (this.editor) {
		// 	this.editor.commands.addCommand({
		// 		name: 'myCommand', //命令名称
		// 		bindKey: { win: 'Ctrl-S', mac: 'Command-S' }, //快捷键
		// 		exec: _.debounce(() => {
		// 			// 这里用防抖函数处理下, 防止连续保存
		// 			if (this.isChange) {
		// 				this.handleSave()
		// 			}
		// 		}, 500),
		// 		readOnly: true // false 只读模式
		// 	})

		// 	//this.editor.setTheme('ace-builds/src-noconflict/mode-json')
		// }
	},
	beforeDestroy() {
		console.log(11)
		if (this.editor) {
			this.editor.destroy()
		}
	}
}
</script>

<style lang="scss" scoped>
.el-tabs__header {
	margin: 0;
}
.el-tabs__content {
	height: 0 !important;
}

.title-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	background-color: #999;
	border-radius: 20px;
	margin-left: 8px;
}
</style>
